<template>
    <div style="height:100%;width:100%;position: relative;">
        <coreEchartsdangyuanfenbu :chatsOption="map3dConfig"></coreEchartsdangyuanfenbu>

        <!--<transition enter-active-class="**animated** bounceIn" leave-active-class="animated infinite bounce delay-2s fastert" :duration="200">-->
        <div class="showTip animate__animated animate__heartBeat  animate__slow" v-if="$store.state.mapTip">
            <dv-border-box-1 class="tip-content">
                <div class="header">
                    <span>宋楼镇:</span>
                    <span @click="$store.commit('changeMapTip', false)">关闭</span>
                </div>
                <div class="content">
                    <div>
                        京东农场
                    </div>
                </div>
            </dv-border-box-1>
        </div>
        <!--</transition>-->
    </div>
</template>
<script>
    import coreEchartsdangyuanfenbu from "./coreEchartsdangyuanfenbu";
    // import { map } from '@/api/home'
    export default {
        components: {
            coreEchartsdangyuanfenbu
        },
        methods: {
            showMsg(e) {
                console.log(e)
            }
        },
        data() {
            return {
                acitveName: {},
                map3dConfig: {


                    tooltip: {
                        show: false,
                        trigger: 'item',
                        formatter: '{a} <br/>{b}:',

                        borderWidth: 4,
                        borderColor: "#48AFFF",
                        backgroundColor: "#010541",
                        padding: 20,
                        extraCssText: "border-radius:20px;",
                        textStyle: {
                            fontSize: 60,
                        }
                    },

                    series: [
                        {
                            name: "丰县",
                            type: "map3D",
                            map: "fxxz", // 自定义扩展图表类型

                            roam: false,
                            top: "-10%",
                            selectedMode: "single",//地图高亮单选
                            shading: "color",
                            aspectScale: 0.8,
                            // boxDepth: 140, //地图倾斜度
                            regionHeight: 12, //地图高度
                            geoCoord: {
                                "宋楼镇": [116.614249, 34.580673]
                            },
                            markPoint: {//数据全是markPoint
                                symbol: 'pin',
                                symbolSize: 40,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
                                itemStyle: {
                                    normal: {
                                        borderColor: '#1e90ff',
                                        borderWidth: 10,            // 标注边线线宽，单位px，默认为1
                                        label: {
                                            show: false
                                        }
                                    },
                                    emphasis: {
                                        borderColor: '#1e90ff',
                                        borderWidth: 10,
                                        label: {
                                            show: false
                                        }
                                    }
                                },
                                effect: {
                                    show: true,
                                    shadowBlur: 0
                                },
                                data: [
                                    // {name: "宋楼镇"},
                                    // {
                                    //     name: "宋楼镇",
                                    //     coord: [116.614249, 34.580673],
                                    //     valueDim: "map",
                                    //     // geoCoord: {
                                    //     //     "宋楼镇": [116.614249, 34.580673]
                                    //     // },
                                    // },
                                    {
                                        name: "宋楼镇", x: 430, y: 490, valueDim: "map3D",
                                    },
                                    // {/
                                    //     name: "宋楼镇",
                                    //     geooord: [116.614249, 34.580673]
                                    // },
                                    // {name: "王沟镇",},
                                ],

                            },//end markPoint


                            //
                            viewControl: {
                                distance: 160,//地图视角 控制初始大小
                                alpha: 60,
                                rotateSensitivity: 0,//禁止旋转
                                zoomSensitivity: 0,//禁止缩放
                            },

                            label: {
                                show: true,
                                distance: 0,
                                formatter: "{b}",
                                emphasis: {
                                    position: 'right',
                                    show: true
                                },
                                textStyle: {
                                    color: "#1ABEDC", //文字颜色
                                    fontSize: 20, //文字大小
                                    backgroundColor: "transparent" //透明度0清空文字背景
                                },
                            },
                            itemStyle: {
                                // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
                                color: "rgba(11, 56, 137,0.5)", // 地图板块的颜色
                                // color:"rgb(7, 59, 157, 1)",
                                opacity: 1, // 图形的不透明度 [ default: 1 ]
                                borderWidth: 6, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
                                borderColor: "#5CADDA", // 图形描边的颜色。[ default: #333 ]

                            },
                            emphasis: {
                                // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
                                label: {
                                    // label高亮时的配置
                                    show: false,
                                    distance: 0,
                                    textStyle: {
                                        color: "#1ABEDC", // 高亮时标签颜色变为 白色
                                        fontSize: 20 // 高亮时标签字体 变大
                                    }
                                },
                                itemStyle: {
                                    color: "rgba(11, 56, 137,0.5)",// 高亮时地图板块颜色改变
                                    // opacity: 0
                                }
                            },
                            // },


                            data: [
                                {name: "宋楼镇", value: ""},
                                {name: "王沟镇", value: ""},
                                {name: "赵庄镇", value: ""},
                                {name: "首羡镇", value: ""},
                                {name: "顺河镇", value: ""},
                                {name: "欢口镇", value: ""},
                                {name: "师寨镇", value: ""},
                                {name: "凤城街道", value: ""},
                                {name: "常店镇", value: ""},
                                {name: "中阳里街道", value: ""},
                                {name: "孙楼街道", value: ""},
                                {name: "华山镇", value: ""},
                                {name: "大沙河镇", value: ""},
                                {name: "梁寨镇", value: ""},
                                {name: "范楼镇", value: ""},
                            ]

                            // data: [
                            //     { name: "宋楼镇", value: 1.34, itemStyle: {
                            //             color: 'rgb(239,221,209)'
                            //         } },
                            //     { name: "王沟镇", value: 177.48, itemStyle: {
                            //
                            //         } },
                            //     { name: "赵庄镇", value: 386.1 },
                            //     { name: "首羡镇", value: 692.6 },
                            //     { name: "顺河镇", value: 445.49 },
                            //     { name: "欢口镇", value: 489.64, itemStyle: {
                            //             color: 'rgb(239,221,209)'
                            //         } },
                            //     { name: "师寨镇", value: 659.78 },
                            //     { name: "高新区", value: 40.97 },
                            //     { name: "开发区", value: 504.26 },
                            //     { name: "中阳里街道", value: 200.9 },
                            //     { name: "孙楼街道", value: 48.26 },
                            //     { name: "华山镇", value: 581.84 },
                            //     { name: "大沙河镇", value: 178.01 },
                            //     { name: "梁寨镇", value: 227.92 },
                            //     { name: "范楼镇", value: 180.98 }
                            // ]
                        }
                    ]
                },
            };
        },
        mounted() {
        },
        methods: {}
    };
</script>

<style lang="scss" scoped>
    .showTip {
        width: 600px;
        height: 300px;
        overflow-y: hidden;
        border-radius: 20px;
        /*overflow-y: auto;*/
        background: #010642;
        opacity: 0.8;
        position: absolute;
        z-index:1000;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;

        > .tip-content {
            /*padding: 20px;*/
            font-size: 20px;
            /deep/ .border-box-content {
                font-size: 20px;
                padding: 40px;
                display: flex;
                flex-direction: column;
            }
            div.header {
                font-size: 40px;
                padding-bottom: 12px;
                border-bottom: 1px solid #ccc;
                display: flex;
                justify-content: space-between;
                > span {
                    font-size: 40px;
                    &:last-child {
                        cursor: pointer;
                    }
                }
            }
            div.content {
                flex: 1;
                margin-top: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                > div {
                    height: 40%;
                    width: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-family: "黑体", "Dosis", Arial, Helvetica, sans-serif;
                    background: #00D3F8;
                    font-size: 40px;
                }
            ;
            }

        }
    }
</style>
